import React from 'react'
import { Breadcrumb, Table,Button,Modal,message,Popconfirm,Input,Switch} from 'antd';
import { Link } from 'react-router-dom';
import AddPower from './AddPower.js'
import UpdatePower from './UpdatePower.js'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { LoadPowerActionAsync,deletePowerActionAsync,searchPowerActionAsync,updatePowerActionAsync } from '../../../redux/action/powerAction'
const { Search } = Input;
function PowerMgr(props) {
  const [params,setParams] = React.useState({page:1,limit:4})
  const [showAddPowerDialog,setshowAddPowerDialog] = React.useState(false)
  const [selectedRowKeys,setSelectedRowKeys] = React.useState([])
  const [selectedRowKey,setSelectedRowKey] = React.useState([])
  const [showEditPowerDialog,setShowEditPowerDialog] = React.useState(false)
  const [status,setStatus] = React.useState(null)
  const change=(row)=>{
    return (e)=>{
      if(e){
        row.status=1
      }else{
        row.status=0
      }
      props.updatePowerActionAsync(row)
    }
  }
  const columns = [
  {
    title: '权限类型',
    dataIndex: 'powerType',
    align:'center',
    ellipsis:true,
  },
  {
    title: '权限描述',
    dataIndex: 'des',
    align:'center',
    ellipsis:true,
  },
  {
    title: '权限状态',
    ellipsis:true,
    dataIndex: 'status',
    align:'center',
    render:(status,row)=><span>{status===1?<Switch defaultChecked={true} onChange={change(row)}/>:<Switch defaultChecked={false} onChange={change(row)}/>}</span>
  },
  {
    title: 'url',
    ellipsis:true,
    dataIndex: 'url',
    align:'center',
  },
  {
    title: '父权限码',
    ellipsis:true,
    dataIndex: 'code',
    align:'center',
  },
  {
    dataIndex: 'del',
    title:'编辑',
    ellipsis:true,
    align:'center',
    render:(del,row)=>{
      return(
        <div>
          <Button type='primary' style={{marginRight:'15px'}} onClick={()=>{
            setShowEditPowerDialog(true)
            setStatus(row.status)
            setSelectedRowKey([row.key])
          }}>编辑</Button>
          <Popconfirm
            onConfirm={()=>{
              deletePower(row.key)
            }}
            okText='确认'
            cancelText='取消'
            title='你确认要删除吗?'
          >
              <Button type='danger'>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  }
  ];
  const PowerRowSelection={
    onChange:(selectedRowKeys,selectedRows)=>{
      setSelectedRowKeys(selectedRowKeys)
    }
  }
  React.useEffect(() => {
    props.LoadPowerActionAsync(params)
  },[])
  async function changePage(page,pageSize){

    await setParams({page,pageSize})
    props.LoadPowerActionAsync(params)
  }
  let Buttonstyle={margin:"15px"}
  function hideAddPowerDialog(){
    setshowAddPowerDialog(false)
  }
  const handleDelete=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    Modal.confirm({
      title:'你确定要删除吗?',
      okText:'删除',
      cancelText:'取消',
      onOk:()=>{
        props.deletePowerActionAsync(selectedRowKeys)
        props.LoadPowerActionAsync()
        setSelectedRowKeys([])
      }
    })
  }
  const deletePower=(key)=>{
    props.deletePowerActionAsync([key])
    props.LoadPowerActionAsync()
    message.success('删除成功!')
  }
  const updatePower=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    if(selectedRowKeys.length===1)
    {
      setShowEditPowerDialog(true)
      setSelectedRowKey(selectedRowKeys)
    }
    else{
      message.error('你不能选择多条数据修改!')
    }
  }
  return (
    <div className='admin_PowerMgr'>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to='/home/per_mgr'>权限管理</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
    <Button type="primary" onClick={()=>{setshowAddPowerDialog(true)}} style={Buttonstyle}>添加</Button>
    <Button type="danger" style={Buttonstyle} onClick={handleDelete}>删除</Button>
    <Button type="primary" style={Buttonstyle} onClick={updatePower}>修改</Button>
    <Search placeholder='搜索'
      style={{margin:'15px',width:'300px'}}
      enterButton
      onSearch={(value,e)=>{let v={value};props.searchPowerActionAsync(v)}}
    ></Search>
    <Button type="primary" style={Buttonstyle} onClick={()=>{props.LoadPowerActionAsync(params)}}>显示全部</Button>
    <Table 
      dataSource={props.PowerList} 
      columns={columns} 
      rowSelection={{
        type: 'checkbox',
        ...PowerRowSelection,
      }}

      rowKey='key'
      pagination = {{pageSize:4,onChange:changePage}}
    />
    <AddPower visible={showAddPowerDialog} close={hideAddPowerDialog}></AddPower>
    <UpdatePower visible={showEditPowerDialog} status={status} selectedRowKey={selectedRowKey} close={()=>{
      setShowEditPowerDialog(false)
    }}></UpdatePower>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    PowerList:state.powerList
	}),
	{LoadPowerActionAsync,deletePowerActionAsync,searchPowerActionAsync,updatePowerActionAsync}
)(PowerMgr)
